<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ThirtyNine</title>
    <style>
        .page{
            color:black;
            font-size:150%;
        }
    </style>
    <script>
        var socket;
        function openSocket(){
            if (typeof(WebSocket)=="undefined"){
                alert("Your browser does not support websocket")
            }else{
                console.log("The browser supports websocket")
            }

            var socketURL = "http://localhost:8080/ws";
            socketURL=socketURL.replace("https","ws").replace("http","ws");
            console.log(socketURL);

            if(socket!=null){
                socket.close();
                socket=null;
            }

            socket = new WebSocket(socketURL);

            socket.onopen = function(){
            }

            socket.onmessage = function(msg){
                location.reload();
            }

            socket.onclose = function(){
            }
        }

        window.onload=openSocket;
    </script>
</head>
<body>
    <a th:href="@{/user/edit}" style="float:right;text-align:right;font-size:150%;color:black;text-decoration:none">&nbsp;&nbsp;[[${username}]]</a>
    <a style="float:right;text-align:right;font-size:150%;color:black;text-decoration:none" th:href="@{/search(keyword='@'+${username})}">@me&nbsp;&nbsp;</a>
    <a th:href="@{/ChatRoom}" style="font-size:300%;color:black">ChatRoom</a>
    <br><br>
    <form action="/search" method="post">
        <input type="text" name="keyword">
        <input type="submit" value="search">
    </form>
    <br>
    <form action="/speak" method="post" enctype="multipart/form-data">
        <textarea rows="2" cols="100" placeholder="Say something here" name="words"></textarea>
        <br>
        Upload Image(maxsize < 5MB):<input type="file" name="file"/><br>
        <input type="submit" value="send" style="font-size:120%"/>
    </form>
    <br>
    <hr/>
    <div style="color:red" th:if="${top}">
        <p style="font-size:150%">*TOP*</p>
        <p th:utext="${top.words}">words</p><!--don't escape the content of text-->
        <a th:href="@{@{'/uploadedFiles/'+${top.img_name}}}" th:if="${top.img_name}">
            <img th:src="@{'/uploadedFiles/'+${top.img_name}}" width="10%" th:if="${top.img_name}">
        </a>
        <br>
        <a th:href="@{/toReply(reply_id=${top.id})}" style="color:black;font-size:120%;float:right;text-align:right;">Reply</a>
        <br>
        <hr/>
    </div>

    <div th:each="speech:${speeches}">
        [[${speech.id}]]
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a th:text="${speech.speaker}" th:href="@{/user/info(username=${speech.speaker})}" style="font-size:120%;color:black">username</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        [[${speech.send_time}]]
        <p th:utext="${speech.words}">words</p><!--don't escape the content of text-->
        <a th:href="@{@{'/uploadedFiles/'+${speech.img_name}}}" th:if="${speech.img_name}">
            <img th:src="@{'/uploadedFiles/'+${speech.img_name}}" width="10%" th:if="${speech.img_name}">
        </a>
        <br>
        <a th:href="@{/toReply(reply_id=${speech.id})}" style="color:black;font-size:120%;float:right;text-align:right;">Reply</a>
        <br>
        <hr/>
    </div>
    <div th:if="${currentPage}" style="text-align:center">
<!--    I didn't use paging when searching by keyword,so there should be a 'if' here-->
        <a th:href="@{/ChatRoom(page=1)}" class="page" >first</a>
        <a th:href="@{/ChatRoom(page=${currentPage}-1)}" class="page" th:if="${currentPage!=1}">Previous</a>
        <span th:each="i:${#numbers.sequence(1,maxPage)}">
            <a th:href="@{/ChatRoom(page=${i})}" class="page" th:if="(${currentPage-i} < 4) and (${currentPage-i} > -4)">[[${i}]]</a>
        </span>
        <a th:href="@{/ChatRoom(page=${currentPage}+1)}" class="page" th:if="${currentPage!=maxPage}">Next</a>
        <a th:href="@{/ChatRoom(page=${maxPage})}" class="page" >last</a>
    </div>
</body>
</html>
